<template>
  <breadcrumb :levelList="levelList" />
  <el-card class="card">
    <el-form v-if="state.showSearch==true" :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.dept_name" placeholder="部门名称" clearable />
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="getDataList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
         <el-button type="primary" plain size="small" @click="addHandle(dataFormRef)" >新增</el-button>
      </el-col>
      <el-col :span="1.5">
          <el-button size="small" type="info" plain @click="toggleExpandAll">展开/折叠</el-button>
      </el-col>
    </el-row>
    <el-table 
      v-if="refreshTable"
      :data="state.dataList" 
      style="width: 100%" 
      @selection-change="selectionChangeHandle"
      row-key="dept_id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :default-expand-all="isExpandAll"
    >
      <el-table-column prop="dept_name" label="部门名称" width="230" />
      <el-table-column prop="dept_code" label="部门编码" width="150" />
      <el-table-column label="状态" align="center" width="100">
         <template #default="scope">
          <el-button v-if="scope.row.status=='0'" size="small" type="primary" plain>正常</el-button>
          <el-button v-if="scope.row.status=='1'" size="small" type="warning" plain>禁用</el-button>
         </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="editHandle(scope.row)">编辑</el-button>
          <el-button size="small"  type="danger"  @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog :title="state.dialogTitle" v-model="state.showDialog" width="600px" append-to-body>
    <el-form :model="state.dataForm" ref="dataFormRef" :rules="rules"  label-width="120px">
      <el-form-item label="上级部门" prop="parent_id">
         <el-tree-select
            v-model="dataForm.parent_id"
            :data="deptOptions"
            :props="{ value: 'dept_id', label: 'dept_name', children: 'children' }"
            value-key="dept_id"
            placeholder="选择上级部门"
            check-strictly
         />
      </el-form-item>
      <el-form-item label="部门名称" prop="dept_name">
        <el-input placeholder="请输入部门名称" v-model="dataForm.dept_name" />
      </el-form-item>
      <el-form-item label="部门编号" prop="dept_code">
        <el-input placeholder="请输入部门编号" v-model="dataForm.dept_code" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio-button label="正常" value="0" />
          <el-radio-button label="禁用" value="1" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit(dataFormRef)">确 定</el-button>
          <el-button @click="cancelHandle">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, onMounted, nextTick } from 'vue'
import { CrudTool } from '@/utils/curd'
import { getDeptApiUrl, getDeptListApi } from '@/api/sys/dept'
import breadcrumb from '@/views/common/breadcrumb.vue'

const dataFormRef = ref();
const levelList = ['首页','系统设置','部门管理']
const refreshTable = ref(true);
const isExpandAll = ref(true);

const deptOptions = ref([{
  'dept_id':1,
  'dept_name':'洛阳师范学院',
  'children':[]
}]);//部门树形结构


const state = reactive({
  primaryKey:'dept_id',
  queryForm: {
    dept_name:''
  },
  apiUrl: getDeptApiUrl(),
  total:0,
  dataForm:{
    dept_id: 0,
    parent_id: undefined,
    dept_code: undefined,
    dept_name: undefined,
    status: '0',
    remark: undefined
  },
  titleText:['添加部门','修改部门'],
  rules:{
    dept_code: [{ required: true, message: "部门编码不能为空", trigger: "blur" },{ pattern: /^\d{2,8}$/, message: "请输入正确的部门编码", trigger: "blur" }],
    dept_name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
  },
  isPage:false
});

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  nextTick(() => {
    refreshTable.value = true;
  });
}

const { queryForm, dataForm, rules } = toRefs(state);
const { getDataList, addHandle, editHandle, cancelHandle, handleSubmit, handleDelete, handleDeleteBatch, addEventListener } = CrudTool(state)

addEventListener('beforOpenDialog', ()=>{
  getDeptListApi().then(res => {
    deptOptions.value = res.rows;
  });
})

getDataList()

</script>

<style scoped>
.card{
  min-height:600px;
}
</style>